/**
 * 组件：消息项组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';


class UserSkillItem extends Component {

    static propTypes = {
        item: PropTypes.object,
        showSplit: PropTypes.bool,
        onPress: PropTypes.func,
    }

    static defaultProps = {
        item:[],
        showSplit: true,
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }


    onPressBack = () => {
        this.props.navigation.dispatch(
            NavigationActions.reset({
                index: 1,
                actions: [
                    NavigationActions.navigate({routeName: 'MainSearchScene'}),
                    NavigationActions.navigate({routeName: 'MainScene'}),
                ],
            }),
        )
    }

    genGenderUI(gender) {
        if (gender) {
            const genderUrl = gender == "1" ? require('../../img/gender_boy.png') : require('../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genCityUI(city) {
        return (
            <View style={styles.cityLabel}>
                <Text style={styles.userCity}>{city}</Text>
            </View>
        );
    }

    render() {
        const {item, onPress} = this.props
        return (
            <View>
                <TouchableOpacity style={styles.resultItemContainer} onPress={onPress} >
                    <View style={styles.resultItem}>
                        <View style={styles.leftPanel}>
                            <Image style={styles.leftImage} source={{uri: Util.substrImageUrl(item.touxiang_url)}}/>
                        </View>
                        <View style={styles.midPanel}>
                            <Text style={styles.topTitleText}>{item.nick_name}</Text>
                            <View style={styles.midPanelMid}>
                                <View style={styles.userGenderGroup}>
                                    {this.genGenderUI(item.gender)}
                                    <Text style={styles.age}>{item.age}</Text>
                                </View>
                                {this.genCityUI(item.city)}
                            </View>
                            <Text style={styles.userSkillName}>{item.skill_name}</Text>
                        </View>
                        <View style={styles.rightPanel}>
                            <Text style={styles.lastTime}>{item.times}</Text>
                            <View style={styles.priceArea}>
                                <Text style={styles.priceType}>¥</Text>
                                <Text style={styles.priceText}>{item.price}元/{item.unit}</Text>

                            </View>
                            <Text style={styles.orderNumber}>接单{item.orderNumber}次</Text>

                        </View>
                    </View>
                    <View style={styles.splitLine}/>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        height: 54,
        flexDirection: 'row',
        // borderWidth:1,
    },
    resultItemContainer: {
        padding: 8,
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#ECECEC',
        marginTop: 4,
        marginBottom: 4,
        marginLeft: 140,
    },
    resultItem: {
        flexDirection: 'row',
        // borderWidth:1,
        // borderColor:'red',

    },
    leftPanel: {
        width: 100,
        height: 100,

    },
    leftImage: {
        width: 100,
        height: 100,
        backgroundColor:Color.PRIMARY_COLOR,
        resizeMode: 'contain',
        borderRadius: 5,
    },
    midPanel: {
        flex: 1,
        padding: 8,
    },
    midPanelMid: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 16,

    },
    rightPanel: {
        height: 100,
        padding: 8,
        paddingBottom: 0,
        alignItems: 'flex-end',
    },
    topTitle: {},
    topTitleText: {
        fontSize: 16,
    },
    bottomPanel: {
        flex: 1,
        alignItems: 'flex-end',
        justifyContent: 'flex-end',
    },
    lastTime: {
        fontSize: 12,
        color: '#909090',
    },
    orderNumber: {
        fontSize: 12,
        color: '#909090',
    },
    priceArea: {
        flexDirection: 'row',
        alignItems: 'flex-end',
        paddingTop: 16,
        paddingBottom: 16,
    },
    priceType: {
        color: '#ED551F',
        fontSize: 14,
    },
    priceText: {
        color: '#ED551F',
        fontSize: 16,
    },
    userInfoArea: {
        flexDirection: 'row',
        paddingTop: 8,
        paddingBottom: 8,
    },
    userNickName: {
        fontSize: 14,
        color: '#909090',
    },
    userAge: {
        fontSize: 14,
        color: '#909090',
    },
    userCity: {
        fontSize: 14,
        color: '#909090',
    },
    userGender: {
        fontSize: 14,
        color: '#909090',
    },
    cityLabel: {},
    cityLabelGirl: {
        backgroundColor: '#ec7280'
    },
    cityLabelBoy: {
        backgroundColor: '#99ccff'
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        minWidth: 30,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginRight: 4,
    },
    age: {
        color: '#FF0055',
        fontSize: 12,
        backgroundColor: 'transparent',
    },
    genderIcon: {
        width: 10,
        height: 10,
    },
    userSkillName: {
        fontSize: 16,
        color: '#909090',
        marginTop: 16,
    },
});

export default UserSkillItem;